<template>
	<div>
		<div class="pl-6 pr-6 pt-6">
			<el-card class="!border-none pt-4" shadow="never">
				<el-form class="ls-form el-set-form" :model="formData" inline>
					<el-form-item label="图号">
						<el-input class="w-[280px]" placeholder="请输入" v-model="formData.Number" clearable/>
					</el-form-item>
					<el-form-item label="机型">
						<el-input class="w-[280px]" placeholder="请输入" v-model="formData.type" clearable />
					</el-form-item>
					<el-form-item label="提交人">
						<el-input class="w-[280px]" placeholder="请输入" v-model="formData.type" clearable />
					</el-form-item>
					<el-form-item>
						<el-button class="main-color1 w-[76px]" >重置</el-button>
						<el-button class="w-[76px]" type="primary" color="#0054A6">查询</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="text-right">
				<el-button class="w-[76px] h-[36px]" color="#0054A6" type="primary">
					<router-link :to="{
					        path: getRoutePath('InquiryManagement.InquiryManagement/DrawingAdd'),
					        query: {
					            id: '1'
					        }
					    }">
						<span>添加</span>
					</router-link>
				</el-button>
			</div>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="图号" prop="scene_name" align="center">
					<template #default="{ row }">
						<span class="main-color">部门名称</span>
					</template>
				</el-table-column>
				<el-table-column label="机型" prop="AAAAAAAA" align="center" />
				<el-table-column label="提交人" prop="管理员" align="center"/>
				<el-table-column label="Unit Weight(kg)" prop="2400" align="center" />
				<el-table-column label="价格(USD/pcs)" prop="$1000" align="center" />
				<el-table-column label="最新报价时间" prop="2023-09-18 10:32:57" align="center" />
				<el-table-column label="操作" fixed="right" align="center">
					<template #default="{ row }">
						<el-button type="primary" link >
							<span class="main-color1">编辑</span>
						</el-button>
						<el-button type="primary" link >
							<router-link :to="{
							        path: getRoutePath('permission.permission/UpdateRecords'),
							        query: {
							            id: '1'
							        }
							    }">
								<span class="main-color1">更新记录</span>
							</router-link>
						</el-button>
						<el-button type="primary" link >
							<span class="main-color1">删除</span>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<div class="p-[20px] v-flex v-row-right">
			<el-pagination color="#0054A6" background layout="prev, pager, next" :default-page-size="6" :total="1000"
				:pager-count="6" />
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { getRoutePath } from '@/router'
	const formData = reactive({
		Number: '',
		type: '',
	})
	const lists = ref<Array<any>>([
		{}, {}, {}
	])
</script>

<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label{
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}
	.el-set-form:deep() .el-input__inner{
		height: 36px;
	}
	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}
	

	.el-col {
		border-radius: 4px;
	}
	:deep() .el-pagination.is-background .el-pager li.is-active {
		background-color: var(--el-text-color-main);
	}
</style>